<template>
  <div class="make" @touchmove.prevent="" @click="hideMake($refs.hideMake)" ref="hideMake">
    <div class="setting" ref="setting">
      <div class="title">
        <slot></slot>
        <span class="setting-btn" v-show="showCustom" @click="clickConfirm">确定</span>
      </div>
      <div class="box-wrapper">
        <div class="classify" v-show="!showCustom">
          <div class="classify-box" ref="classify">
            <div class="box" ref="classBox">
              <span @click="clickClass(-1)" :class="{'activeSpan':activeSpan == -1}">全部</span>
              <span :class="{'activeSpan':activeSpan == item.sid}"
                    v-for="item in classify"
                    @click="clickClass(item.sid)">
              {{item.name}}
            </span>
            </div>
          </div>
        </div>
        <div class="wrapper" ref="wrapper" v-show="!showCustom">
          <ul class="content">
            <li v-for="item in newImgList" @click="pitchOn(item)">
              <img :class="{'active':active == item.id}" :src="item.small_img_path+'?v='+versionNumber" alt="">
            </li>
          </ul>
          <p class="wrapperHint" v-show="!newImgList.length">暂无数据</p>
        </div>
      </div>

      <div class="wrapper" v-if="showCustom">
        <div class="content input" ref="wrapperContent">
          <yd-cell-item>
            <yd-textarea v-model="textContent" slot="right" maxlength="60" placeholder="请输入祝福语"></yd-textarea>
          </yd-cell-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import {getCardTemplate, getBackgroundColor, getWordTemplate, GetBackClassification} from 'common/js/greeting'

  export default {
    props: {
      active: {
        type: String,
        default: ''
      },
      imgList: {
        type: Array,
        default: []
      },
      type: {
        type: String,
        default: '0'
      },
      showCustom: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        page: 1,
        newImgList: [],
        textContent: '',
        loadMore: true,
        versionNumber: '',
        activeSpan: -1,
        classify: [],
        classType:-1,
      }
    },
    mounted() {
      GetBackClassification().then(res => {
        this.$refs.classBox.style.width = res.data.length * 1.8 + +2+ 'rem'
        this.classify = res.data;
        this.classScroll = new BScroll(this.$refs.classify, {
          click: true,
          scrollX: true,
          scrollY: false
        })
        //滚动
        setTimeout(() => {
          this.classScroll.refresh();
        }, 20)

      })
      //版本号，清缓存
      this.versionNumber = versionNumber;
      this.newImgList = this.imgList;
      setTimeout(() => {
        this.$nextTick().then(() => {
          var oWrapper = document.querySelector('.wrapper');
          var oUl = document.querySelector('.wrapper ul');
          var aLi = document.querySelectorAll('.wrapper ul li');
          switch (this.type) {
            case '1':
              oUl.style.minHeight = '12rem'
              break;
            case '2':
              oUl.style.minHeight = '12rem'
              break;
            case '3':
              oUl.style.minHeight = '4.8rem'
              break;
          }
          oUl.style.width = aLi.length * 6.8 + 0.6 + 'rem';
          oUl.style.height = oUl.offsetHeight + 'px';
          this.$refs.setting.style.transform = 'translateY(-' + oUl.offsetHeight / 1.6 + 'px)';
          this.scroll = new BScroll(this.$refs.wrapper, {
            click: true,
            scrollX: true,
            scrollY: false
          })
          //滚动
          this.scroll.refresh();
          //滚动结束加载
          this.scroll.on('scrollEnd', (pos) => {
            if (-(oUl.offsetWidth - oWrapper.offsetWidth) + 300 > pos.x) {
              switch (this.type) {
                case '1':
                  if (this.loadMore) {
                    this._getBackgroundColor();
                  }
                  break;
                case '2':
                  if (this.loadMore) {
                    this._getCardTemplate();
                  }
                  break;
                case '3':
                  if (this.loadMore) {
                    this._getWordTemplate();
                  }
                  break;
              }
            }
          })
        })
      }, 50)
    },
    methods: {
      clickClass(item) {
        this.loadMore = true;
        this.classType = item;
        this.page = 1;
        switch (this.type) {
          case '1':
            getBackgroundColor({
              "phpsid": localStorage.getItem('token'),//session_id
              "page": this.page,
              "type": this.classType
            }).then(res => {
              if (res.status === 1) {
                this.newImgList = res.data
                this.activeSpan = item;
                document.querySelector('.wrapper ul').style.width = res.data.length * 6.8 + 0.6 + 'rem';
                setTimeout(() => {
                  this.scroll.refresh();
                  this.scroll.scrollTo(0,0);
                }, 20)
              }
            })
            break;
          case '2':
            getCardTemplate({
              "phpsid": localStorage.getItem('token'),//session_id
              "page": this.page,
              "type": this.classType
            }).then(res => {
              if (res.status === 1) {
                this.newImgList = res.data
                this.activeSpan = item;
                document.querySelector('.wrapper ul').style.width = res.data.length * 6.8 + 0.6 + 'rem';
                setTimeout(() => {
                  this.scroll.refresh();
                  this.scroll.scrollTo(0,0);
                }, 20)
              }
            })
            break;
          case '3':
            getWordTemplate({
              "phpsid": localStorage.getItem('token'),//session_id
              "page": this.page,
              "type": this.classType
            }).then(res => {
              if (res.status === 1) {
                this.newImgList = res.data
                this.activeSpan = item;
                document.querySelector('.wrapper ul').style.width = res.data.length * 6.8 + 0.6 + 'rem';
                setTimeout(() => {
                  this.scroll.refresh();
                  this.scroll.scrollTo(0,0);
                }, 20)
              }
            })
            break;
        }
      },
      //确定输出文字
      clickConfirm() {
        this.$emit('confirm', this.textContent)
      },
      //隐藏模板选中
      hideMake(item) {
        if (event.target == item) {
          this.$emit('clickHide');
        }
      },
      //模板加载更多
      _getCardTemplate() {
        this.page++;
        getCardTemplate({
          "phpsid": localStorage.getItem('token'),//session_id
          "page": this.page,
          "type": this.classType
        }).then(res => {
          if (res.status === 1) {
            if (res.data.length) {
              this.newImgList = this.newImgList.concat(res.data)
              setTimeout(() => {
                document.querySelector('.wrapper ul').style.width = document.querySelectorAll('.wrapper ul li').length * 6.8 + 0.6 + 'rem';
                this.scroll.refresh();
              }, 20)
            } else {
              this.loadMore = false;
            }
          }
        })
      },
      //背景加载更多
      _getBackgroundColor() {
        this.page++;
        getBackgroundColor({
          "phpsid": localStorage.getItem('token'),//session_id
          "page": this.page,
          "type": this.classType
        }).then(res => {
          if (res.status === 1) {
            if (res.data.length) {
              this.newImgList = this.newImgList.concat(res.data)
              setTimeout(() => {
                document.querySelector('.wrapper ul').style.width = document.querySelectorAll('.wrapper ul li').length * 6.8 + 0.6 + 'rem';
                this.scroll.refresh();
              }, 20)
            } else {
              this.loadMore = false;
            }
          }
        })
      },
      //图文加载更多
      _getWordTemplate() {
        this.page++;
        getWordTemplate({
          "phpsid": localStorage.getItem('token'),//session_id
          "page": this.page,
          "type": this.classType
        }).then(res => {
          if (res.status === 1) {
            if (res.data.length) {
              this.newImgList = this.newImgList.concat(res.data)
              setTimeout(() => {
                document.querySelector('.wrapper ul').style.width = document.querySelectorAll('.wrapper ul li').length * 6.8 + 0.6 + 'rem';
                this.scroll.refresh();
              }, 20)
            } else {
              this.loadMore = false;
            }
          }
        })
      },
      pitchOn(it) {
        this.$emit('wzhclick', it);
      },
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .make
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: $background-shade;

  .input
    margin:.6rem .45rem;
    font-size: .4rem

  .setting
    position: absolute;
    top: 50%;
    left: .96rem;
    right: .96rem;
  .setting-title
    position :relative;
    background :$background;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
  .title
    position: relative;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    background: $background;
    .setting-btn
      position: absolute;
      top: .3rem;
      right: .5rem;
      display: block;
      width: 1.5rem;
      line-height: .7rem;
      color: $color;
      border-radius: .35rem;
      text-align: center;
      z-index: 11;
      background: -webkit-linear-gradient(-300deg, #f65ecb, #9366f1);

  .box-wrapper
    position :absolute;
    top: 1.3rem;
    right: 0;
    left: 0;
  .wrapper
    position: absolute;
    top: .9rem;
    right: 0;
    left: 0;
    background: $background-b;
    overflow: hidden;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
    .wrapperHint
      position: absolute;
      top:3rem;
      left:0;
      right:0;
      text-align :center;
      font-size :.5rem;
      color :$color-input-p;


  ul
    overflow: hidden;
    padding: 0 .3rem;
    li
      float: left;
      width: 6rem;
      margin: 1rem .4rem;
      background: $background;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    img
      display: block;
      width: 100%;

  .classify
    background: $background;
    line-height: 1rem;
    overflow: hidden;
    .classify-box
      overflow: hidden;
    span
      position: relative;
      display: inline-block;
      width: 1.8rem;
      font-size: .38rem;
      text-align: center;
      color: $color-text;
    span:before
      content: " ";
      position: absolute;
      top: 50%;
      right: 0;
      bottom: 0;
      transform: translateY(-50%);
      height: 40%;
      border-left: 1px solid #e6e6e6 !important;
    span:before:last-child
      content: " ";
      border-left: none;
    .activeSpan
      background: -webkit-linear-gradient(-300deg, #f65ecb, #9366f1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;


</style>
